import React, { Component } from 'react'

import CopyToClipboard from 'react-copy-to-clipboard'
export default class MsgList extends Component {
  componentWillMount () {
    let { author } = this.props.location.query
    this.props.specifyAuthor(author)
    this.updateMsgList()
  }
  /**
   * 类似于 Vue 中的 route: { data: Function } 属性，监听路由变化加载数据
   * 【拓展阅读】无限循环坑 http://stackoverflow.com/questions/36189775
   */
  componentWillReceiveProps (nextProps) {
    // query string 变化
    if (nextProps.location.search !== this.props.location.search) {
      return this.props.specifyAuthor(nextProps.location.query.author)
    }

    const nextDisplayControl = nextProps.msg.displayControl
    if (
      JSON.stringify(nextDisplayControl) ===
      JSON.stringify(this.props.msg.displayControl)
    ) return

    this.updateMsgList(nextDisplayControl)
  }

  updateMsgList (displayControl = this.props.msg.displayControl) {
    let { pageIdx, quantity, authorSpecified: author } = displayControl
    this.props.fetchMsg({ pageIdx, quantity, author })
  }

  render () {
    

    return (
      <div>
        <CopyToClipboard text="111"
          >
          <span>Copy</span>
        </CopyToClipboard>
      </div>
    )
  }
}
